<template>
    <div>

        <div class="toolbar">
            <el-form :inline="true" :model="q" size="mini">
                <el-form-item label="绑定时间段">
                    <el-date-picker   v-model="q.bind_created_at_start_time" value-format="yyyy-MM-dd" type="date" placeholder="选择日期时间"></el-date-picker>
                    -
                    <el-date-picker   v-model="q.bind_created_at_end_time"  value-format="yyyy-MM-dd" type="date" placeholder="选择日期时间"></el-date-picker>
                </el-form-item>
                <el-form-item label="用户ID:">
                    <el-input v-model="q.user_id" prefix-icon="el-icon-edit"></el-input>
                </el-form-item>
                <el-form-item label="绑定渠道:">
                    <el-input v-model="q.channel" prefix-icon="el-icon-edit"></el-input>
                </el-form-item>
                <el-form-item label="所属组员:" v-if="roles.includes(6)||roles.includes(1)||roles.includes(5)">
                    <more-selete v-if="staffArray &&restInit" :dataList="staffArray" @checkedMore="q.staff_list= $event" :placeholder="'请选择组员'"></more-selete>
                </el-form-item>
                <el-form-item label="所属组长:" v-if="roles.includes(6)||roles.includes(5)">
                    <more-selete v-if="leaderArray &&restInit" :dataList="leaderArray" @checkedMore="q.section_chief_list= $event" :placeholder="'请选择组长'"></more-selete>
                </el-form-item>
                <el-form-item label="所属主管:" v-if="roles.includes(6)">
                    <more-selete v-if="managerArray &&restInit" :dataList="managerArray" @checkedMore="q.leader_list= $event" :placeholder="'请选择主管'"></more-selete>
                </el-form-item>
                <el-form-item label="平台:">
                    <el-select v-model="q.platform_id" filterable placeholder="请选择平台">
                        <el-option  :label="'所有'" value=""></el-option>
                        <el-option v-for="(statu, index) of index_mapper" :key="index" :label="statu" :value="index"></el-option>

                    </el-select>
                </el-form-item>
                <el-form-item label="操作人:">
                    <el-select v-model="q.operator_id" filterable placeholder="请选择操作人">
                        <el-option v-for="item in operatorArray" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="query">查询</el-button>
                    <el-button type="danger" @click="reload">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-row type="flex" class="row-bg btn-row" justify="end">
            <el-button v-if="roles.includes(6)||roles.includes(5)||roles.includes(9)" size="mini" @click='changeInfo()' type="primary" >用户查询</el-button>
            <el-button v-if="roles.includes(6)||roles.includes(5)||roles.includes(9)" size="mini" @click='add()' type="primary" icon="el-icon-plus">绑定用户</el-button>
            <el-button v-if="roles.includes(6)||roles.includes(9)" size="mini" @click="downloadData" type="primary" icon="el-icon-download">导出数据</el-button>
        </el-row>
        <el-table :data="listData.items" v-loading.body="listLoading" @sort-change="sortlist" size="mini" stripe border fit highlight-current-row>

            <el-table-column prop="id" label="绑定ID" width="100"></el-table-column>
            <el-table-column prop="user_id" label="用户ID" width="140"></el-table-column>
            <el-table-column prop="user_registered_at" label="注册时间" width="140"></el-table-column>
            <el-table-column prop="platform_id" label="平台" ></el-table-column>
            <el-table-column prop="original_channel" label="原渠道号"  width="160" ></el-table-column>
            <el-table-column prop="channel" label="绑定渠道号"  width="160"></el-table-column>
            <el-table-column prop="staff" label="绑定组员"  width="130" ></el-table-column>
            <el-table-column prop="operator_name" label="操作人" width="160" ></el-table-column>
            <el-table-column prop="created_at" label="绑定时间" width="160" ></el-table-column>
            <el-table-column prop="note" label="备注"  width="160"></el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination  @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page="q.page_no" :page-sizes="$store.state.app.pageSizeArr"
                            :page-size="q.page_size"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="listData.total">
            </el-pagination>
        </div>
        <save-update  v-if="showUpdate" :showUpdate.sync="showUpdate" :id="show_id" :stafflist="stafflist"  :index_mapper="index_mapper"></save-update>
        <query  v-if="showquery" :showUpdate.sync="showquery" :id="show_id"  :index_mapper="index_mapper"></query>
    </div>
</template>

<script>
    import saveUpdate from './saveUpdate'
    import query from './query'
    import { getBindList, getChnOptions,getOperatorOptions } from '@/api'
    import MoreSelete from '@/components/MoreSelete/index'
    import {queryFilter} from '@/utils/patch'
    import { AppModule } from '@/store/modules/app';
    export default {
        components: {MoreSelete,saveUpdate,'query':query},
        data() {
            return {
                restInit: true,
                listData: {},
                q: {page_size: 30, page_no: 1},
                listLoading: false,
                showUpdate: false,
                showquery:false,
                show_id: null,
                stafflist: [],
                leaderlist: [],
                staffArray: [],
                leaderArray: [],
                managerlist: [],
                managerArray: [],
                operatorlist:[],
                operatorArray:[],

            }
        },
        computed: {
            index_mapper(){
                return AppModule.index_mapper
            }
        },
        created() {
            this.getOptList();
            this.getStaffList();
            this.getLeaderList();
            this.getManagerList();
            this.getroles();
        },
        mounted(){
            this.getList()
        },
        deactivated(){
            this.listLoading = false
        },
        methods: {

            downloadData(){
                let queryObj = queryFilter(this.q)
                let data = Object.assign({},queryObj,{ to_export_file: true})
                getBindList(data).then(res => {
                    if (res.status === 0) {
                        window.location.href = window.location.origin + res.data.url
                    }
                })
            },
            async getLeaderList(){
                await getChnOptions({data_type: 'leader'}).then(res => {
                    if(res.status === 0){
                        this.leaderlist = res.data
                        this.leaderArray = []
                        this.leaderlist.map(item => {
                            this.leaderArray.push(item.name)
                        })
                    }
                })
            },
            async getStaffList(){
                await getChnOptions({data_type: 'staff'}).then(res => {
                    if(res.status === 0){
                        this.stafflist = res.data
                        this.staffArray = []
                        this.stafflist.map(item => {
                            this.staffArray.push(item.name)
                        })
                    }
                })
            },
            async getManagerList(){
                await getChnOptions({data_type: 'manager'}).then(res => {
                    if(res.status === 0){
                        this.managerlist = res.data
                        this.managerArray = []
                        this.managerlist.map(item => {
                            this.managerArray.push(item.name)
                        })
                    }
                })
            },
            async getOptList(){
                await getOperatorOptions().then(res => {
                    if(res.status === 0){
                        this.operatorlist =[];
                        this.operatorArray = []
                        let keysP = Object.keys(res.data.operator)
                        keysP.map(key => {
                            this.operatorlist.push({id:Number(key),name:res.data.operator[key]})
                        });
                        [...this.operatorArray]=[...this.operatorlist,...res.data.manager,...res.data.leader,...res.data.staff]
                    }
                })
            },
            getroles(){
                this.roles=this.$store.state.user.roles.map(item=>{
                    return item.id
                })
            },
            changeInfo(){
                this.show_id = null
                this.showquery = true
            },
            add(){
                this.show_id = null
                this.showUpdate = true
            },
            update(row){
                this.show_id = row.id
                this.showUpdate = true
            },
            remove(row){
                this.$confirm(`确认删除ID为${row.id}的项么？`, '删除用户', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
            },
            query(){
                this.q = Object.assign(this.q, {page_no: 1, page_size: 30})
                this.getList()
            },
            reload() {
                this.restInit = false
                this.$nextTick(() => (this.restInit = true))
                this.q = {page_size: 30, page_no: 1, }
                this.getList()
            },
            sortlist(sort){
                this.q.$orderby = sort.prop
                this.getList()
            },
            handleSizeChange (val) {
                this.q.page_size = val
                this.getList()
            },
            handleCurrentChange (val) {
                this.q.page_no = val
                this.getList()
            },
            getList(){
                let queryObj = queryFilter(this.q)
                if(queryObj.staff_list){
                    queryObj = Object.assign({}, queryObj, {staff_list: `${JSON.stringify(queryObj.staff_list)}`} )
                }
                if(queryObj.section_chief_list){
                    queryObj = Object.assign({}, queryObj, {section_chief_list: `${JSON.stringify(queryObj.section_chief_list)}`} )
                }
                if(queryObj.leader_list){
                    queryObj = Object.assign({}, queryObj, {leader_list: `${JSON.stringify(queryObj.leader_list)}`} )
                }
                getBindList(queryObj).then(res => {

                    if(res.status === 0){
                        this.listLoading = false
                        this.listData = res.data
                        this.listData.items= this.listData.items.map(item=>{

                            if( item.platform_id){
                                item.platform_id=this.index_mapper[item.platform_id]; }

                            return item
                        })
                    }
                })
            }
        },
        watch: {
            showUpdate() {
                if(!this.showUpdate){
                    this.getList()
                }
            },
            showquery(){
            }
        }
    }
</script>
